<template>
  <div class="form-style">
    <span class="form-title">高变化率</span>
    <BasicForm @register="registerForm1" />
    <span class="form-title">低变化率</span>
    <BasicForm @register="registerForm2" />
  </div>
</template>

<script setup lang="ts">
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  let Uuid1 = '';
  let Uuid2 = '';
  // 表单内容
  const schemas: FormSchema[] = [
    {
      field: 'IsEnable',
      component: 'Switch',
      label: '是否启用变化率:',
      labelWidth: 120,
      defaultValue: false,
      componentProps: {
        checkedChildren: '启用',
        checkedValue: true,
        unCheckedChildren: '关闭',
        unCheckedValue: false,
      },
      colProps: {
        span: 24,
      },
    },
    {
      field: 'ValueType',
      component: 'Select',
      label: '类型：',
      colProps: {
        span: 6,
      },
      ifShow: ({ values }) => {
        return values.IsEnable;
      },
      defaultValue: 0,
      componentProps: {
        options: [
          { label: '绝对值', value: 0 },
          { label: '百分比', value: 1 },
        ],
      },
    },
    {
      field: 'Value',
      component: 'Input',
      label: '值：',
      defaultValue: 0,
      colProps: {
        span: 6,
      },
      ifShow: ({ values }) => {
        return values.IsEnable;
      },
      rules: [
        {
          required: true,
          validator: async (_rule, value) => {
            if (['', null, undefined].indexOf(value) >= 0) {
              /* eslint-disable-next-line */
              return Promise.reject('请输入值');
            }
            return Promise.resolve();
          },
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'AlarmLevel',
      component: 'Select',
      label: '级别：',
      colProps: {
        span: 6,
      },
      ifShow: ({ values }) => {
        return values.IsEnable;
      },
      defaultValue: 0,
      componentProps: {
        options: [
          {
            label: '信息',
            value: 0,
          },
          {
            label: '次要',
            value: 1,
          },
          {
            label: '一般',
            value: 2,
          },
          {
            label: '主要',
            value: 3,
          },
          {
            label: '严重',
            value: 4,
          },
        ],
      },
    },
    {
      field: 'IsEnableDirection',
      component: 'Switch',
      label: '是否启用单方向:',
      labelWidth: 120,
      defaultValue: true,
      ifShow: ({ values }) => {
        return values.IsEnable;
      },
      componentProps: {
        checkedChildren: '启用',
        checkedValue: true,
        unCheckedChildren: '关闭',
        unCheckedValue: false,
      },
      colProps: {
        span: 6,
      },
    },
    {
      field: 'Direction',
      component: 'Select',
      label: '单方向：',
      colProps: {
        span: 6,
      },
      ifShow: ({ values }) => {
        return values.IsEnable && values.IsEnableDirection;
      },
      defaultValue: 0,
      componentProps: {
        options: [
          { label: '升', value: 0 },
          { label: '降', value: 1 },
        ],
      },
      rules: [
        {
          required: true,
          validator: async (_rule, value) => {
            if (['', null, undefined].indexOf(value) >= 0) {
              /* eslint-disable-next-line */
              return Promise.reject('请选择单方向');
            }
            return Promise.resolve();
          },
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'TimeUnit',
      component: 'Select',
      label: '单位：',
      colProps: {
        span: 6,
      },
      ifShow: ({ values }) => {
        return values.IsEnable && values.ValueType === 1;
      },
      defaultValue: 0,
      componentProps: {
        options: [
          {
            label: '秒',
            value: 0,
          },
          {
            label: '分',
            value: 1,
          },
          {
            label: '时',
            value: 2,
          },
        ],
      },
    },
    {
      field: 'Description',
      component: 'InputTextArea',
      label: '描述：',
      colProps: {
        span: 6,
      },
      ifShow: ({ values }) => {
        return values.IsEnable;
      },
    },
  ];
  const [registerForm1, { validateFields: validateFields1, setFieldsValue: setFieldsValue1 }] =
    useForm({
      labelWidth: 80,
      schemas: schemas,
      showActionButtonGroup: false,
      actionColOptions: {
        span: 24,
      },
    });
  const [registerForm2, { validateFields: validateFields2, setFieldsValue: setFieldsValue2 }] =
    useForm({
      labelWidth: 80,
      schemas: schemas,
      showActionButtonGroup: false,
      actionColOptions: {
        span: 24,
      },
    });
  // 设置值方法
  function setValue(val) {
    val.forEach((v, i) => {
      if (i === 0) {
        Uuid1 = v.Uuid;
        setFieldsValue1(v);
      } else {
        Uuid2 = v.Uuid;
        setFieldsValue2(v);
      }
    });
  }
  // 获取值方法
  async function getValue() {
    try {
      let res1 = await validateFields1();
      let res2 = await validateFields2();
      let defaultValue = {
        IsEnable: false,
        ValueType: 0,
        Value: 0,
        AlarmLevel: 0,
        IsEnableDirection: false,
        Direction: 0,
        Description: '',
        TimeUnit: 0,
      };
      let formVal1 = res1.IsEnable ? res1 : defaultValue;
      let formVal2 = res2.IsEnable ? res2 : defaultValue;

      return [
        { AlarmStringType: '高变化率', Uuid: Uuid1, ...formVal1 },
        { AlarmStringType: '低变化率', Uuid: Uuid2, ...formVal2 },
      ];
    } catch {
      return false;
    }
  }
  defineExpose({ getValue, setValue });
</script>

<style scoped lang="less">
  .form-style {
    width: 100%;
    padding: 10px 5px;
    box-sizing: border-box;

    .form-title {
      padding-left: 7px;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer;
    }
  }
</style>
